<template>
  <header>
    <div class="sousuo">
      <section @click="fn1()">
        <span class="iconfont icon-fanhui1"></span>
      </section>
      
      <span class="iconfont">&#xe6e4;</span>
      <input
        type="text"
        v-model="str"
        @keydown.enter="directe()"
        @click="qing"
      />
    </div>
    <router-link to="/" class="quxiao"> 取消 </router-link>
  </header>
</template>
<script>
export default {
  name: "Mysousuo",
  data: function () {
    return {
      str: "请输入您喜欢的商品",
    };
  },
  methods: {
    qing() {
      this.str = "";
    },
    directe() {
      console.log(this.str);
      if (
        this.str == "nike" ||
        this.str == "耐克" ||
        this.str == "鞋" ||
        this.str == "衣服"||
        this.str == "手表"
      ) {
         let pname=localStorage.setItem("pname",1);
         console.log(pname);
       
        this.$router.push({ path: "/xiangqing" });

        
      } else {
        this.$toast({
          message: "暂无该商品",
          position: "top",
        });
      }
    },
    fn1(){
      this.$router.go(-1)
    }
  },
};
</script>
<style scoped>
header {
  width: 3.75rem;
  height: 0.6rem;
  display: flex;
  background-color: white;
}
header .sousuo {
  width: 2.9rem;
  height: 0.3rem;
  background-color: #f5f5f8;
  display: flex;
  margin-top: 0.15rem;
  margin-left: 0.2rem;
}
header .sousuo span {
  width: 0.2rem;
  height: 0.3rem;
  text-align: center;
  line-height: 0.3rem;
}
header .sousuo input {
  width: 2.7rem;
  height: 0.3rem;
  background-color: #f5f5f8;
  font-size: 0.12rem;
}
header a {
  width: 0.3rem;
  font-size: 0.12rem;
  height: 0.3rem;
  text-align: center;
  line-height: 0.3rem;
  font-weight: 700;
  margin-left: 0.18rem;
}
.quxiao {
  margin-top: 0.15rem;
}
.xianshi {
  width: 2.2rem;
  height: 0.5rem;
  position: fixed;
  top: 0rem;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background-color: black;
  color: #ffffff;
  line-height: 0.5rem;
  display: none;
}
</style>
